@import "font-size";

// space
$space-none: 0;
$space-nn: 2px;
$space-mn: 3px;
$space-mnn: 4px;
$space-xs: 5px;
$space-xss: 8px;
$space-sm: 10px;
$space-ssm: 12px;
$space-smm: 15px;
$space-df: 20px;
$space-dff: 25px;
$space-md: 30px;
$space-mdd: 35px;
$space-lg: 40px;
$space-lgg: 45px;
$space-xl: 50px;
$space-xxl: 60px;
$space-sl: 70px;
$space-sxl: 80px;
$space-ssl: 90px;
$space-hun: 100px;

//横向
$box-x-xs: $space-xs;
$box-x-sm: $space-sm;
$box-x-df: $space-smm;
$box-x-md: $space-df;

//纵向
$box-y-xs: $space-xs;
$box-y-sm: $space-xss;
$box-y-df: $space-ssm;
$box-y-md: $space-smm;

$box-xs: $box-y-xs $box-x-xs;
$box-sm: $box-y-sm $box-x-sm;
$box-df: $box-y-df $box-x-df;
$box-md: $box-y-md $box-x-md;

$box-map: (
        xs: $box-xs,
        sm: $box-sm,
        df: $box-df,
        md: $box-md
);

$padding-map: (
        none: $space-none,
        nn: $space-nn,
        mn: $space-mn,
        mnn: $space-mnn,
        xs: $space-xs,
        xss: $space-xss,
        sm: $space-sm,
        ssm: $space-ssm,
        smm: $space-smm,
        df: $space-df,
        dff: $space-dff,
        md: $space-md,
        mdd: $space-mdd,
        lg: $space-lg,
        lgg: $space-lgg,
        xl: $space-xl,
        xxl: $space-xxl,
        sl: $space-sl,
        sxl: $space-sxl,
        ssl: $space-ssl
);


$size-map: (
        none: none,
        nn: nn,
        mn: mn,
        mnn: mnn,
        xs: xs,
        xss: xss,
        sm: sm,
        ssm: ssm,
        smm: smm,
        df: df,
        dff: dff,
        md: md,
        mdd: mdd,
        lg: lg,
        lgg: lgg,
        xl: xl,
        xxl: xxl,
        sl: sl,
        sxl: sxl,
        ssl: ssl
);

.pa {
  padding: map-get($padding-map, df) !important;
}

.pt {
  padding-top: map-get($padding-map, df) !important;
}

.pb {
  padding-bottom: map-get($padding-map, df) !important;
}

.pl {
  padding-left: map-get($padding-map, df) !important;
}

.pr {
  padding-right: map-get($padding-map, df) !important;
}

.px {
  padding-left: map-get($padding-map, df) !important;
  padding-right: map-get($padding-map, df) !important;
}

.py {
  padding-top: map-get($padding-map, df) !important;
  padding-bottom: map-get($padding-map, df) !important;
}

.ma {
  padding: map-get($padding-map, df) !important;
}

.mt {
  margin-top: map-get($padding-map, df) !important;
}

.mb {
  margin-bottom: map-get($padding-map, df) !important;
}

.ml {
  margin-left: map-get($padding-map, df) !important;
}

.mr {
  margin-right: map-get($padding-map, df) !important;
}

.mx {
  margin-left: map-get($padding-map, df) !important;
  margin-right: map-get($padding-map, df) !important;
}

.my {
  margin-top: map-get($padding-map, df) !important;
  margin-bottom: map-get($padding-map, df) !important;
}

@each $colorKey, $color in $size-map {
  .text-#{$colorKey} {
    font-size: map-get($text-map, $colorKey);
  }
  .pa-#{$colorKey} {
    padding: map-get($padding-map, $colorKey) !important;
  }
  .pt-#{$colorKey} {
    padding-top: map-get($padding-map, $colorKey) !important;
  }
  .pb-#{$colorKey} {
    padding-bottom: map-get($padding-map, $colorKey) !important;
  }
  .pl-#{$colorKey} {
    padding-left: map-get($padding-map, $colorKey) !important;
  }
  .pr-#{$colorKey} {
    padding-right: map-get($padding-map, $colorKey) !important;
  }
  .px-#{$colorKey} {
    padding-left: map-get($padding-map, $colorKey) !important;
    padding-right: map-get($padding-map, $colorKey) !important;
  }
  .py-#{$colorKey} {
    padding-top: map-get($padding-map, $colorKey) !important;
    padding-bottom: map-get($padding-map, $colorKey) !important;
  }
  .ma-#{$colorKey} {
    padding: map-get($padding-map, $colorKey) !important;
  }
  .mt-#{$colorKey} {
    margin-top: map-get($padding-map, $colorKey) !important;
  }
  .mb-#{$colorKey} {
    margin-bottom: map-get($padding-map, $colorKey) !important;
  }
  .ml-#{$colorKey} {
    margin-left: map-get($padding-map, $colorKey) !important;
  }
  .mr-#{$colorKey} {
    margin-right: map-get($padding-map, $colorKey) !important;
  }
  .mx-#{$colorKey} {
    margin-left: map-get($padding-map, $colorKey) !important;
    margin-right: map-get($padding-map, $colorKey) !important;
  }
  .my-#{$colorKey} {
    margin-top: map-get($padding-map, $colorKey) !important;
    margin-bottom: map-get($padding-map, $colorKey) !important;
  }
}
